
<!-- 好友列表 -->
<template>
  <div class="friendList">
    <div class="groupName">{{unitName}}</div>
    <p v-if="friendList.length==0" style="color:#ccc;text-align: center;">当前部门暂无用户</p>
    <ul v-else>
      <li
        v-for="(item, index) in friendList"
        :key="index"
        class="frienditem"
        :class="{ noborder: !item.initial }"
      >
        <!-- <div class="list_title" v-if="item.initial">{{item.initial}}</div> -->
        <div
          class="friend-info"
          :class="{ active: item.id === selectId }"
          @click="choice(item)"
        >
          <!-- <img
            class="avatar"
            width="36"
            height="36"
            :src="$utils.getFileUrl(item.photo)"
          /> -->
          <img  class="avatar" width="36" height="36" src="../../static/images/mother.jpg" />
          <div class="remark">
            <p>{{ item.name }}</p>
            <p style="color:#999">{{item.duty}}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data(){
    return{
        friendList:[],
        selectId:"",
        unitName:""
    }
  },
  computed: {
    ...mapState(["searchText", "teamArray"]),

    ...mapGetters([
      // 'searchedFriendlist'
    ]),
  },
  mounted() {
    // this.selectFriendList();
  this.$events.$on('friendData',(data,name) =>{
    this.friendList = data;
    this.unitName = name
    console.log(name,"好友信息列表")
    // if(data.length == 0){
      this.$events.$emit("infoMsg","",0)
  // }
  })
  },
  methods: {
    selectFriendList() {
      this.$api
        .UserList(this.UserListParams)
        .then((res) => {
          this.$store.commit("friendList", res.data.page.list);
        })
        .catch((err) => {
          console.log(err, "错误");
        });
    },
    // 获取好友信息
    choice(item){
      this.$store.state.infoStatus = 2;
      this.$events.$emit("infoMsg",item,2)
      this.selectId = item.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.friendList {
  height: 540px;
  overflow-y: auto;
  .groupName {
    font-size: 18px;
    padding: 23px 20px 20px 14px;
    line-height: 22px;
  }
  .frienditem {
    border-top: 1px solid #dadada;

    &:first-child,
    &.noborder {
      border-top: none;
    }

    .list_title {
      box-sizing: border-box;
      width: 100%;
      font-size: 12px;
      padding: 15px 0 3px 12px;
      color: #999;
    }

    .friend-info {
      display: flex;
      padding: 12px;
      transition: background-color 0.1s;
      font-size: 0;

      &:hover {
        background-color: rgb(220, 220, 220);
      }

      &.active {
        background-color: #ECECEC;
      }

      .avatar {
        border-radius: 2px;
        margin-right: 12px;
      }

      .remark {
        font-size: 14px;
        line-height: 18px;
       span:nth-child(1){
         color: #999;
       }
      }
    }
  }
}
</style>
